// @ts-ignore
import DcContainer from '@/components/dc-container/index.vue'
import { useTemplateRef, useSlots, renderSlot, computed } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
import type { RefOrElement } from 'vue-draggable-plus'

const key = 'dc-container'

const templateConfig = {
  key,
  name: '容器面板',
  icon: 'comp-container',
  attr: {
    placeholder: '请输入11111111111',
  },
  layouts: {
    outside: {
      name: 'none',
      __style__: {},
    },
    inside: {
      name: 'none',
      __style__: {},
    },
    child: {
      name: 'none',
      __style__: {},
    },
    extends: [],
  },
  style: {},
  events: [],
  children: [],
}

export default {
  key,
  templateConfig,
  sort: 100,
  render: (config: any) => {
    console.log(key, 'render', config)
    const slots = useSlots()
    return () => (
      <DcContainer>
        {renderSlot(slots, 'default')}
      </DcContainer>
    )
  },
  designer: (config: any) => {
    console.log(key, 'designer', config)

    const list = computed({
      get() {
        return config.children
      },
      set(val) {
        console.log(key, 'set', val.length, config.id)
        config.children = val
      },
    })

    const refContainer: RefOrElement = useTemplateRef('refContainer')
    useDraggable(refContainer, list, {
      animation: 150,
      ghostClass: 'dc-draggable-ghost',
      group: 'draggableGroup',
      dragClass: 'dc-draggable-class',
      handle: '.dc-draggable-handler',
      onAdd(event) {
        console.log(key, 'onAdd', event, config.children, config.id)
        // // @ts-ignore
        // if (!event.clonedData) {
        //   return
        // }
        // // @ts-ignore
        // if (!event.clonedData.id) {
        //   // @ts-ignore
        //   event.clonedData.id = new Date().getTime()
        //   // @ts-ignore
        //   event.clonedData.name += 'Copy'
        // }
      },
      onRemove(event) {
        console.log(key, 'onRemove', event, config.children, config.id)
      },
    })
    const slots = useSlots()
    return () => (
      <DcContainer ref="refContainer">
        {renderSlot(slots, 'default')}
      </DcContainer>
    )
  },
}